<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" href="/assets/logo-d139e059.svg" />

    <title>demo1</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- scroll -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-smooth-scroll/2.2.0/jquery.smooth-scroll.min.js" type="application/javascript"></script>
    <link rel="stylesheet" href="//qn.uwitkey.com/fontawesome5/css/all.min.css" />
    <style>
        .slide1Block {
            position: absolute;
            width: 160px;
            right: 120px;
            top: 0px;
            display: none;
            background: white;
            /* display: none; */
            border-radius: 6px;
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
            padding: 10px 0px;
        }

        .silde1Arrow {
            width: 15px;
            height: 15px;
            background: white;
            position: absolute;
            right: -5px;
            top: 10px;
            transform: rotate(45deg);
        }

        .slide1:hover .slide1Block {
            display: block;
        }
    </style>
</head>

<body>
    <div>top</div>
    <!-- 侧面栏 -->
    <div class="position-fixed top-50 end-0 bg-info slide-bar text-center rounded-start pt-4 d-none d-sm-block" style="width:100px;">
        <div class="slide1 pb-3 position-relative">
            <a class="d-block">
                <span class="d-block"><i class="fas fa-phone-alt fs-4 text-white"></i></span>
                <p class="text-white fs-6 mb-0 pb-3 w-75 border-bottom d-inline-block lh-1">联系电话</p>
            </a>
            <div class="slide1Block">
                0311-82956760
                <div class="silde1Arrow"></div>
            </div>

        </div>
        <div class="slide1 pb-3 position-relative">
            <a class="d-block">
                <span class="d-block"><i class="fab fa-weixin fs-4 text-white"></i></span>
                <p class="text-white fs-6 mb-0 pb-3 w-75 border-bottom d-inline-block lh-1">客服微信</p>
            </a>
            <div class="slide1Block">
                <img class="w-100" src="//qn1.10soo.net/assets23/202305301355407.jpg" alt="">
                <div class="silde1Arrow"></div>
            </div>
        </div>
        <div class="slide1 pb-3">
            <a class="d-block btn-scroll-top">
                <span class="d-block"><i class="fas fa-arrow-up fs-4 text-white"></i></span>
                <p class="text-white fs-6 mb-0 pb-3 w-75 d-inline-block lh-1">回到顶部</p>
            </a>
        </div>
    </div>
    <div style="height: 2000px;"></div>
    <script>
        $('.btn-scroll-top').on('click', function() {
            $.smoothScroll(0);
        });
    </script>
</body>

</html>